<template>
  <div class="relative h-screen bg-gray-50 flex flex-col">
    <!-- 顶部工具栏 -->
    <DesignToolbar />
    <MainCanvas />
    <LeftPanel />
    <RightPanel />
    <!-- 底部状态栏 -->
    <StatusBar />
    <!-- <DrawingPanel /> -->
  </div>
</template>

<script setup>
import DesignToolbar from '@/components/design/Toolbar/DesignToolbar.vue'
import LeftPanel from '@/components/design/Panel/LeftPanel.vue'
import MainCanvas from '@/components/design/Canvas/MainCanvas.vue'
import RightPanel from '@/components/design/Panel/RightPanel.vue'
import StatusBar from '@/components/design/Toolbar/StatusBar.vue'
import DrawingPanel from '@/components/design/Panel/DrawingPanel.vue'
import { onMounted, onUnmounted } from 'vue'
import { useInteraction } from '@/composables/design/useInteraction'
const interactionService = useInteraction()
// 应该绑定一个全局键盘事件
onMounted(() => {
  document.addEventListener('keydown', interactionService.handleKeyDown)
})
onUnmounted(() => {
  document.removeEventListener('keydown', interactionService.handleKeyDown)
})

</script>

<style scoped>
/* 主容器样式 */
</style>
